<template>
  <div>
    <!-- 1.0 头部导航结构 -->
    <van-nav-bar
      title="精彩跟帖"
      left-arrow
      @click-left="$router.back()"
      @click-right="$router.push({ path: '/' })"
    >
      <template #right>
        <van-icon name="wap-home-o" color="#f00" size="6vw" />
      </template>
    </van-nav-bar>
    <!-- 2.0主体 -->

    <van-list
      class="List"
      v-model="loading"
      :finished="finished"
      finished-text="没有更多了"
      @load="onLoad"
    >
      <div class="item" v-for="item in List" :key="item.id">
        <div class="item-header">
          <van-image class="avatar" :src="item.user.head_img | imgUrl" />
          <div class="info">
            <h3 class="username">{{ item.user.nickname }}</h3>
            <p class="date">{{ item.create_date }}</p>
          </div>
          <div class="reply" @click="replyFn(item)">回复</div>
        </div>
        <div class="item-footer">
          <MyContent
            v-if="item.parent"
            :parent="item.parent"
            @parentCommentFn="parentCommentFn"
          ></MyContent>
          <div class="content">{{ item.content }}</div>
        </div>
      </div>
    </van-list>
    <!-- 3.0底部评论 -->
    <MyComment
      @btnFn="btnFn"
      :article="article"
      ref="MyComment"
      :commentObj="temp"
    ></MyComment>
  </div>
</template>

<script>
import { postPommentAPI } from "../apis/news.js";
import { getPostDetailstAPI } from "../apis/news.js";
// 复用组件
import MyContent from "../components/MyContent.vue";
import MyComment from "../components/MyComment";

export default {
  methods: {
    onLoad() {
      this.pageIndex++;
      this.getListFn();
      console.log(11);
    },
    async btnFn() {
      //刷新页面获得新发布帖子
      this.getListFn();
      this.temp = null;
    },
    replyFn(item) {
      // console.log(item);
      this.$refs.MyComment.inputFn();
      //当点击回复时，把评论的数据传给底层评论组件
      this.temp = item;
    },
    async getListFn() {
      const id = this.$route.params.id;
      //获取评论
      const res = await postPommentAPI(id, this.pageIndex, this.pageSize);
      console.log(res);
      if(res.data.data.length ==0){
        this.finished=true
        return
      }
      this.List.push(...res.data.data);
      this.loading=false
    },
    //父评论回复的Fn
    parentCommentFn(parent) {
      //console.log(parent);
      this.$refs.MyComment.inputFn();
      this.temp = parent;
    },
  },
  components: {
    MyContent,
    MyComment,
  },

  data() {
    return {
      loading: false,
      finished: false,
      List: [],
      num: 1,
      article: {},
      temp: null,
      pageIndex: 1,
      pageSize: 1,
    };
  },
  async created() {
    this.getListFn();
    //获取文章信息
    const id = this.$route.params.id;
    const res2 = await getPostDetailstAPI(id);
    // console.log(res2);
    this.article = res2.data.data;
    this.loading = false
  },
};
</script>


<style lang="less" scoped>
.item {
  border-bottom: 1px solid rgb(133, 130, 130);
  padding: 20px;
  .item-header {
    display: flex;
    justify-content: start;
    align-items: start;
    margin-bottom: 10px;
    .avatar {
      height: 50px;
      width: 50px;
      background: pink;
      margin-right: 10px;
    }

    .info {
      flex: 1;
      .username {
        font-size: 16px;
        padding: 5px 0;
      }

      .date {
        font-size: 12px;
        color: #d4d4d4;
      }
    }

    .reply {
      position: relative;
      z-index: 11;
      font-size: 14px;
    }
  }
}
</style>